<template>
	<div class="content">
		<el-card class="box-card proto-type">
			<h2 class="title_s"><img src="../../assets/images/title.png" alt="" style="vertical-align: middle;"/>查询条件</h2>
			<el-card class="box-card proto-type">
				<el-form :model="inForm" :rules="rules" ref="inForm" class="demo-ruleForm" label-width="140px">
					<el-row class="search_box_s">
						<el-col :span="8">
							<el-form-item label="保单号" prop="">
								<el-input v-model="inForm.proposalNo" placeholder="请输入内容" size="mini"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="保险公司" prop="insuranceCompanyCode">
								<el-select v-model="inForm.insuranceCompanyCode" placeholder="请选择" size="mini" @change="insuranceCompanyCode_ch">
									<el-option v-for="item in options_insuranceCompanyName" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>

						</el-col>
						<el-col :span="8">
							<el-form-item label="分支机构" prop="companyCode">

								<el-select v-model="inForm.companyCode" placeholder="请选择" size="mini" @change="companyCode_ch">
									<el-option v-for="item in options_companyName" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row class="search_box_s">
						<el-col :span="8">
							<el-form-item label="产品名称" prop="riskCode">

								<el-select v-model="inForm.riskCode" placeholder="请选择" size="mini" @change="riskCode_ch">
									<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="起保日期起" prop="">

								<el-date-picker v-model="inForm.startDate" type="datetime" placeholder="选择日期时间" align="right" size="mini">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="起保日期到" prop="">

								<el-date-picker v-model="inForm.endDate" type="datetime" placeholder="选择日期时间" align="right" size="mini">
								</el-date-picker>
							</el-form-item>

						</el-col>
					</el-row>
					<el-row class="search_box_s">
						<el-col :span="8">
							<el-form-item label="被保险人名称" prop="">

								<!--<el-input v-model="inForm.insuredName" placeholder="请输入内容" ></el-input>-->
								<el-autocomplete v-model="inForm.insuredName" size="mini" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
							</el-form-item>
						</el-col>
						<el-col :span="8">

						</el-col>
						<!--<el-col :span="8">
							<el-form-item label="投保单状态" prop="proposalStatus">

								<el-select v-model="inForm.proposalStatus" placeholder="请选择" size="mini">
									<el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>

						</el-col>-->
						<el-col :span="8">
							<el-form-item label="OP协议号" prop="">

								<el-input v-model="inForm.protocolNo" placeholder="请输入内容" size="mini"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="报关单号" prop="">

								<el-input v-model="inForm.customsListNo" placeholder="请输入内容" size="mini"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<!--<el-row class="search_box_s">

						

					</el-row>-->

					<div class="search_box_s">

						<el-button type="primary" size="mini" @click="search_s('inForm')">查询</el-button>
						<el-button @click="search_s_clear" size="mini" class="button2">重置</el-button>
					</div>
				</el-form>
			</el-card>

		</el-card>
		<el-card class="box-card proto-type">
			<h2 class="title_s"> <img src="../../assets/images/title.png" alt="" style="vertical-align: middle;"/>查询结果</h2>
			<el-card class="box-card proto-type">

				<el-table :data="tableData1" border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}" v-loading="loading">
					<el-table-column type="index" label="序号">
					</el-table-column>
					<el-table-column prop="proposalNo" label="保单号" width="180">
					</el-table-column>
					<el-table-column prop="proposalStatus" label="理赔申请状态" width="100">
						<template slot-scope="scope">
							{{scope.row.proposalStatus | proposalStatustype}}
						</template>
					</el-table-column>
					<el-table-column prop="riskName" label="产品名称" width="120">
					</el-table-column>
					<el-table-column prop="insuranceCompanyName" label="保险公司" width="120">
					</el-table-column>
					<el-table-column prop="companyName" label="分支机构" width="120">
					</el-table-column>
					<el-table-column prop="policyHolderName" label="投保人" width="120">
					</el-table-column>
					<el-table-column prop="insuredName" label="被保险人" width="120">
					</el-table-column>
					<el-table-column prop="startDate" label="起保日期" width="200">
					</el-table-column>
					<el-table-column prop="currencyName" label="币种" width="120">
					</el-table-column>
					<el-table-column prop="amount" label="保额" width="120">
					</el-table-column>
					<el-table-column prop="premium" label="保费" width="120">
					</el-table-column>
					<el-table-column prop="address" label="操作" width="180" fixed="right">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="view_but('view',scope)">理赔申请</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div style="text-align: right;margin-top:20px">
					<el-pagination   background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

			</el-card>

		</el-card>

	</div>

</template>

<script>
	import { proposalQueryList, deleteByProposalNo_fun } from '@/api/policymanagement'

	import { getChilComList, getProductList, getCompanyList } from '@/api/baseDate'
	export default {
		name: "protocol-insert",
		data() {
			return {
				currentPage4: 4,
				loading: false,
				restaurants: [],
				timeout: null,
				tableData: [],
				tableData1: [{
					proposalNo: '',
					proposalStatus: '投保单状态',
					addRecordFlag: '是否自动申报待补录',
					riskCode: '险种代码',
					riskName: '险种名称',
					insuranceCompanyName: '保险公司',
					companyCode: '分支机构代码',
					companyName: '分支机构名称名称',
					policyHolderName: '投保人名称',
					insuredName: '被保险人名称',
					startDate: '起保日期',
					currency: '币别代码',
					currencyName: '币别代名称',
					amount: '保额',
					premium: '保费'
				}],
				options: [{
					value: "666666",
					label: "人民保险"
				}],
				options1: [{
					value: "1",
					label: "上海分公司"
				}],
				options2: [],
				options3: [{
					value: "1",
					label: "是"
				}],

				options4: [{
					value: "0",
					label: "新建"
				}, {
					value: "1",
					label: "待补录"
				}, {
					value: "2",
					label: "暂存"
				}, {
					value: "3",
					label: "自核失败"
				}, {
					value: "4",
					label: "自核通过提交核保"
				}, {
					value: "5",
					label: "核保失败"
				}, {
					value: "6",
					label: "核保成功"
				}, {
					value: "7",
					label: "已申报"
				}, ],
				inForm: {
					proposalNo: '',
					insuranceCompanyCode: '',
					//					insuranceCompanyCode: '666666',
					insuranceCompanyName: '',
					companyCode: '',
					companyName: '',
					riskCode: '',
					riskName: '',
					startDate: '',
					endDate: '',
					insuredName: '',
					addRecordFlag: '',
					proposalStatus: '',
					protocolNo: '',
					customsListNo: '',

				},
				pageNo: 1, //第几页
				pageSize: 10, //每页数量
				total: 0, //总条数

				rules: {
					insuranceCompanyCode: [{
						required: false,
						message: '请选择保险公司',
						trigger: 'change'
					}],
					companyCode: [{
						required: false,
						message: '请选择分支机构',
						trigger: 'change'
					}],
					riskCode: [{
						required: false,
						message: '请选择产品名称',
						trigger: 'change'
					}],
					addRecordFlag: [{
						required: false,
						message: '请选择自动申报补录',
						trigger: 'change'
					}],
					proposalStatus: [{
						required: false,
						message: '请选择保单状态',
						trigger: 'change'

					}]

				},
				options_insuranceCompanyName: [],
				options_companyName: []
			}
		},
		mounted() {

		},
		created() {
			//this.Init_get()

			const companyCode = this.$store.state.user.userinfo.insuranceCompanyCode
			this.get_select(companyCode)

			this.restaurants = this.loadAll();

		},
		methods: {
			//初始化
			Init_get() {

				let data = this.inForm
				this.loading = true
				data.insuranceCompanyName = this.inForm.insuranceCompanyName
				data.insuranceCompanyCode = this.inForm.insuranceCompanyCode
				data.companyName = this.inForm.companyName
				data.companyCode = this.inForm.companyCode
				data.pageNo = this.pageNo
				data.pageSize = this.pageSize
				console.log(data)

				proposalQueryList(data).then(res => {
					console.log(res)
					this.tableData = res.content
					this.total = res.totalCount
					this.loading = false
				})

			},
			//保险公司
			insuranceCompanyCode_ch(val) {
				let obj = {};
				obj = this.options_insuranceCompanyName.find((item) => { //这里的userList就是上面遍历的数据源
					return item.value === val; //筛选出匹配数据
				});

				this.inForm.insuranceCompanyName = obj.label

				this.companyqueryAll_fun()
				this.riskqueryAll_fun()

			},
			//分支机构
			companyCode_ch(val) {
				let obj = {};
				obj = this.options_companyName.find((item) => { //这里的userList就是上面遍历的数据源
					return item.value === val; //筛选出匹配数据
				});

				this.inForm.companyName = obj.label

			},
			//产品名称 --险种
			riskCode_ch(val) {
				let obj = {};
				obj = this.options2.find((item) => { //这里的userList就是上面遍历的数据源
					return item.value === val; //筛选出匹配数据
				});

				this.inForm.riskName = obj.label

			},
			//每页条数
			handleSizeChange(val) {

				this.pageSize = val
				this.Init_get()

			},
			//当前页码
			handleCurrentChange(val) {

				this.pageNo = val
				this.Init_get()

			},

			//查询
			search_s(formName) {
				var data = {}

				this.$refs[formName].validate((valid) => {
					if(valid) {
						//this.Init_get()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//重置
			search_s_clear() {
				this.inForm = {
					proposalNo: '',
					insuranceCompanyCode: '',
					insuranceCompanyName: '',
					companyCode: '',
					companyName: '',
					riskCode: '',
					riskName: '',
					startDate: '',
					endDate: '',
					insuredName: '',
					addRecordFlag: '',
					proposalStatus: '',
					protocolNo: '',
					customsListNo: '',
				}
			},
			//删除
			del_but(row) {

				console.log(row)
				var data = {
					proposalNo: row.row.proposalNo
				}

				deleteByProposalNo_fun(data).then(res => {

					if(res.rtnCode == "0000") {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.Init_get()
					}

				})

				//				this.tableData.splice(row.$index, 1)
			},
			// 支持模糊查询
			loadAll() {
				return [{
						"value": "三全鲜食（北新泾店）",
						"address": "长宁区新渔路144号"
					},
					{
						"value": "Hot honey 首尔炸鸡（仙霞路）",
						"address": "上海市长宁区淞虹路661号"
					},
					{
						"value": "新旺角茶餐厅",
						"address": "上海市普陀区真北路988号创邑金沙谷6号楼113"
					},
				]
			},
			querySearchAsync(queryString, cb) {
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

				clearTimeout(this.timeout);
				this.timeout = setTimeout(() => {
					cb(results);
				}, 1000 * Math.random());
			},
			createStateFilter(queryString) {
				return(state) => {
					return(state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			handleSelect(item) {
				console.log(item);
			},
			//查看 ------ 编辑

			view_but(type, row) {

				
				this.$router.push({
					name: 'claimentry',
				});

			},
			
			//------下拉信息
			get_select(code) {
				this.findInsuranceCompany_fun(code)
				this.companyqueryAll_fun(code)
				this.riskqueryAll_fun(code)

			},

			//保险公司
			findInsuranceCompany_fun(code) {

				var data = {
					insuranceCompanyCode: code
				}

				getCompanyList(data).then(res => {
					var obj = {}
					this.options_insuranceCompanyName = []
					for(var i = 0; i < res.length; i++) {
						console.log(res)
						obj.value = res[i].insuranceCompanyCode
						obj.label = res[i].insuranceCompanyName
						this.options_insuranceCompanyName.push(obj)
					}

				})
			},
			//分支机构
			companyqueryAll_fun(code) {

				var data = {
					insuranceCompanyCode: code
				}

				getChilComList(data).then(res => {

					for(var i = 0; i < res.length; i++) {
						var obj = {}
						obj.value = res[i].companyCode
						obj.label = res[i].companyName
						this.options_companyName.push(obj)
					}

				})

			},
			//产品名称
			riskqueryAll_fun(code) {
				var data = {
					insuranceCompanyCode: code
				}

				getProductList(data).then(res => {

					this.options2 = []
					for(var i = 0; i < res.length; i++) {
						var obj = {}
						obj.value = res[i].riskCode
						obj.label = res[i].riskName
						this.options2.push(obj)
					}

					console.log(this.options2)

				})

			}

		}
	}
</script>
<style lang="scss" scoped>
	.el-table th,
	.el-table td {
		text-align: center !important;
	}
	
	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #A23131;
		color: #FFF;
	}
	
	.el-pagination.is-background .el-pager li.active {
		color: #fff;
		cursor: default;
	}
	
	.el-pagination.is-background .el-pager li:hover {
		color: #A23131;
	}
	
	.el-pagination.is-background .el-pager li:not(.disabled):hover {
		color: #A23131;
	}
	
	.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
		background-color: #A23131;
		color: #FFF;
	}
	
	.search_box_s {
		margin-bottom: 0px !important;
		text-align: center;
	}
	
	.search_box_s .el-input,
	.search_box_s .el-select {
		width: 200px;
	}
	.el-autocomplete{
		width:200px;
	}
	
	.search_box_s .label {
		text-align: left;
		width: 120px;
	}
	
	.el-form-item {
		margin-bottom: 5px;
	}
	
	.el-form-item__error {
		left: 165px;
	}
	
	.el-form-item__content {
		display: flex;
	}
	
	thead th {
		color: #909399 !important;
	}
</style>
<style >
	.content {
		padding: 15px;
	}
	
	.title_s {
		font-size: 14px;
		font-weight: bold;
	}
	
	.label_s {
		font-size: 14px;
		margin-right: 20px;
	}
	
	.search_box_s button {
		/*background: #4D69F6;
		border: #4D69F6;*/
		width: 180px;
		margin: 25px 0;
	}
	
	.search_box_s .button2 {
		background: #E0E4E8;
		color: #333;
		border: #E0E4E8;
	}
	
	.search_input i {
		color: #A23131;
		font-size: 15px;
	}
	
	.but_box {
		text-align: center;
		margin: 40px 0;
	}
	
	.but_box button {
		width: 194px;
		background: #4D69F6;
	}
	
	.but_box button:last-child {
		background: #E0E4E8;
		color: #333;
		border: #E0E4E8;
	}
	
	.label {
		width: 100px;
		display: inline-block;
		text-align: center;
		position: relative;
		font-size: 14px;
	}
	
	.dialog_footer {
		margin: 20px 0;
		text-align: center;
	}
	
	.dialog_footer button {
		width: 150px;
		background: #4D69F6;
	}
	
	.dialog_footer button:last-child {
		background: #E0E4E8;
		color: #333;
		border: #E0E4E8;
	}
	
	.red_s {
		color: red;
		position: absolute;
		left: -10px;
	}
	
	.el-table__header tr,
	.el-table__header th {
		text-align: center;
		background-color: #E0E4E8;
		padding: 0;
		height: 40px;
		font-size: 12px;
	}
	
	.el-table__body tr,
	.el-table__body td {
		text-align: center;
		padding: 0;
		height: 40px;
		font-size: 12px;
	}
</style>